<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心镜游戏 - 探索内心的镜像</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：深紫色，代表神秘与思考
                        secondary: '#EC4899', // 辅助色：粉红色，代表情感与内心
                        neutral: '#1F2937', // 中性色：深灰，用于文本
                        light: '#F3F4F6', // 浅色：用于背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'serif'],
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-flip {
                perspective: 1000px;
            }
            .card-inner {
                transition: transform 0.8s;
                transform-style: preserve-3d;
            }
            .card-front, .card-back {
                backface-visibility: hidden;
            }
            .card-back {
                transform: rotateY(180deg);
            }
            .flipped .card-inner {
                transform: rotateY(180deg);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen font-sans text-neutral">
    <!-- 导航栏 -->
    <header class="fixed w-full bg-white/80 backdrop-blur-md shadow-sm z-50 transition-all duration-300">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-mirror text-primary text-2xl"></i>
                <span class="text-xl font-bold text-primary">心镜游戏</span>
            </div>
            <ul class="hidden md:flex space-x-8">
                <li><a href="#about" class="hover:text-primary transition-colors">品牌介绍</a></li>
                <li><a href="#rules" class="hover:text-primary transition-colors">游戏规则</a></li>
                <li><a href="#game" class="hover:text-primary transition-colors">开始游戏</a></li>
            </ul>
            <button class="md:hidden text-neutral text-xl" id="menuToggle">
                <i class="fa fa-bars"></i>
            </button>
        </nav>
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
            <ul class="container mx-auto px-4 py-4 space-y-4">
                <li><a href="#about" class="block hover:text-primary transition-colors">品牌介绍</a></li>
                <li><a href="#rules" class="block hover:text-primary transition-colors">游戏规则</a></li>
                <li><a href="#game" class="block hover:text-primary transition-colors">开始游戏</a></li>
            </ul>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 relative overflow-hidden">
        <div class="absolute inset-0 overflow-hidden opacity-10">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary animate-float"></div>
            <div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-secondary animate-float" style="animation-delay: 2s;"></div>
        </div>
        <div class="container mx-auto relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-shadow mb-6">
                    心镜游戏
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">探索内心的镜像</span>
                </h1>
                <p class="text-lg md:text-xl text-neutral/80 mb-10">
                    一场关于自我探索与理解的旅程，通过镜像般的问题与答案，
                    发现内心深处的想法与情感。
                </p>
                <a href="#game" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium px-8 py-3 rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                    开始探索 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 品牌介绍 -->
    <section id="about" class="py-20 px-4 bg-white">
        <div class="container mx-auto">
            <div class="max-w-3xl mx-auto text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-6">品牌介绍</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-8 rounded-full"></div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="order-2 md:order-1">
                    <h3 class="text-xl font-semibold mb-4 text-primary">心镜的诞生</h3>
                    <p class="mb-4 text-neutral/80">
                        心镜游戏诞生于对人类内心世界的好奇与探索。我们相信，每个人的内心都像一面镜子，
                        既映照外部世界，也反映真实的自我。
                    </p>
                    <p class="mb-4 text-neutral/80">
                        通过精心设计的"种子问题"，心镜游戏引导玩家进行深度思考，探索那些平时被忽略的
                        想法、感受与价值观。
                    </p>
                    <p class="text-neutral/80">
                        无论是独自一人静思，还是与亲友共同探索，心镜都能为你带来全新的自我认知体验。
                    </p>
                    
                    <div class="mt-8 flex space-x-4">
                        <div class="flex items-center">
                            <i class="fa fa-lightbulb-o text-primary mr-2"></i>
                            <span>启发思考</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa fa-heart text-secondary mr-2"></i>
                            <span>情感连接</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa fa-users text-primary mr-2"></i>
                            <span>促进交流</span>
                        </div>
                    </div>
                </div>
                <div class="order-1 md:order-2 relative">
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-primary/10 rounded-full"></div>
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary/10 rounded-full"></div>
                    <img src="https://picsum.photos/id/1062/600/400" alt="心镜游戏品牌形象图，展示人们通过游戏进行自我探索的场景" class="rounded-lg shadow-xl relative z-10 w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- 游戏规则 -->
    <section id="rules" class="py-20 px-4 bg-gradient-to-br from-light to-blue-50">
        <div class="container mx-auto">
            <div class="max-w-3xl mx-auto text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-6">游戏规则</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-8 rounded-full"></div>
                <p class="text-lg text-neutral/80">
                    心镜游戏简单易懂，却能带来深刻的思考体验
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-object-group text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">准备阶段</h3>
                    <p class="text-neutral/70">
                        游戏包含多组卡片，每组卡片由"种子问题"和"种子答案"组成。
                        所有卡片初始背面朝上，随机排列。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-question-circle text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">翻牌提问</h3>
                    <p class="text-neutral/70">
                        玩家选择一张卡片并翻转，会显示一个"种子问题"。
                        思考这个问题，探索自己的内心想法。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-comment text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">揭示答案</h3>
                    <p class="text-neutral/70">
                        继续翻转同组的另一张卡片，查看对应的"种子答案"。
                        比较自己的想法与答案，获得新的启发。
                    </p>
                </div>
            </div>
            
            <div class="mt-16 max-w-2xl mx-auto bg-white/80 backdrop-blur-sm p-8 rounded-xl shadow-md">
                <h3 class="text-xl font-semibold mb-4 text-center">游戏目标</h3>
                <p class="text-neutral/70 text-center">
                    心镜游戏的目标不是寻找"正确"答案，而是通过问题与答案的映照，
                    促进自我反思与深度思考，增强自我认知，同时也可以作为与他人
                    交流思想、增进理解的工具。
                </p>
            </div>
        </div>
    </section>

    <!-- 游戏区域 -->
    <section id="game" class="py-20 px-4 bg-white">
        <div class="container mx-auto">
            <div class="max-w-3xl mx-auto text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-6">开始游戏</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-8 rounded-full"></div>
                <p class="text-lg text-neutral/80">
                    翻转卡片，探索你的内心世界
                </p>
            </div>
            
            <div class="max-w-5xl mx-auto">
                <!-- 游戏说明 -->
                <div class="bg-light p-6 rounded-lg mb-10 text-center">
                    <p id="gameMessage" class="text-neutral/80">
                        选择一张卡片，开始你的探索之旅
                    </p>
                </div>
                
                <!-- 卡片网格 -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <!-- 卡片1 - 问题 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="1" data-type="question">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-primary to-primary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-question text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">当你感到迷茫时，你通常会向谁寻求帮助？</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片1 - 答案 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="1" data-type="answer">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-secondary to-secondary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-comment text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">人们往往会向理解自己的人寻求帮助，这反映了你对情感连接的需求。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片2 - 问题 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="2" data-type="question">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-primary to-primary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-question text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">什么事情会让你感到真正的快乐和满足？</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片2 - 答案 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="2" data-type="answer">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-secondary to-secondary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-comment text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">真正的快乐往往来源于做真实的自己，以及为他人带来价值。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片3 - 问题 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="3" data-type="question">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-primary to-primary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-question text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">你最希望别人如何看待你？</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片3 - 答案 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="3" data-type="answer">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-secondary to-secondary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-comment text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">我们希望被看待的方式，往往反映了我们希望成为的样子。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片4 - 问题 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="4" data-type="question">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-primary to-primary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-question text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">你最珍视的回忆是什么？为什么？</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 卡片4 - 答案 -->
                    <div class="card-flip cursor-pointer h-48" data-pair="4" data-type="answer">
                        <div class="card-inner relative w-full h-full">
                            <div class="card-front absolute inset-0 bg-gradient-to-br from-secondary to-secondary/80 rounded-xl shadow-md flex items-center justify-center text-white">
                                <div class="text-center p-4">
                                    <i class="fa fa-comment text-4xl mb-2"></i>
                                    <p>点击翻牌</p>
                                </div>
                            </div>
                            <div class="card-back absolute inset-0 bg-white rounded-xl shadow-md p-6 flex items-center justify-center">
                                <p class="text-center text-neutral">珍贵的回忆通常与情感连接、成长或重要的人生转折相关。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 重置按钮 -->
                <div class="mt-12 text-center">
                    <button id="resetGame" class="bg-neutral hover:bg-neutral/90 text-white font-medium px-6 py-2 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300">
                        重置游戏 <i class="fa fa-refresh ml-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-12 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-mirror text-primary text-2xl"></i>
                        <span class="text-xl font-bold">心镜游戏</span>
                    </div>
                    <p class="text-white/70 max-w-md">
                        探索内心的镜像，发现真实的自我。心镜游戏，让思考成为一种乐趣。
                    </p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-white/70 hover:text-primary transition-colors text-xl">
                        <i class="fa fa-weixin"></i>
                    </a>
                    <a href="#" class="text-white/70 hover:text-primary transition-colors text-xl">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-white/70 hover:text-primary transition-colors text-xl">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="text-white/70 hover:text-primary transition-colors text-xl">
                        <i class="fa fa-twitter"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-white/10 mt-8 pt-8 text-center text-white/50 text-sm">
                <p>&copy; 2023 心镜游戏 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuToggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动菜单（如果打开）
                document.getElementById('mobileMenu').classList.add('hidden');
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2');
                header.classList.remove('py-4');
                header.classList.add('shadow');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2');
                header.classList.remove('shadow');
            }
        });
        
        // 游戏逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.card-flip');
            const gameMessage = document.getElementById('gameMessage');
            const resetButton = document.getElementById('resetGame');
            let flippedCards = [];
            let activePair = null;
            
            // 卡片点击事件
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    // 如果卡片已经翻转，或者已经翻开了两张卡片，不执行操作
                    if (this.classList.contains('flipped') || flippedCards.length >= 2) {
                        return;
                    }
                    
                    const pair = this.getAttribute('data-pair');
                    const type = this.getAttribute('data-type');
                    
                    // 第一次翻牌
                    if (flippedCards.length === 0) {
                        this.classList.add('flipped');
                        flippedCards.push(this);
                        activePair = pair;
                        
                        // 更新消息
                        if (type === 'question') {
                            gameMessage.textContent = '思考这个问题，然后找出对应的答案卡片';
                        } else {
                            gameMessage.textContent = '这是一个答案，先找出对应的问题卡片吧';
                        }
                    } 
                    // 第二次翻牌
                    else {
                        // 检查是否是同一对
                        if (pair === activePair) {
                            this.classList.add('flipped');
                            flippedCards.push(this);
                            gameMessage.textContent = '太棒了！你找到了匹配的一对。继续探索其他卡片吧';
                            
                            // 清空已翻卡片数组
                            setTimeout(() => {
                                flippedCards = [];
                                activePair = null;
                            }, 1000);
                        } else {
                            // 翻错了，翻回去
                            this.classList.add('flipped');
                            
                            gameMessage.textContent = '这不是匹配的一对，再试试吧';
                            
                            setTimeout(() => {
                                this.classList.remove('flipped');
                                flippedCards[0].classList.remove('flipped');
                                flippedCards = [];
                                activePair = null;
                                gameMessage.textContent = '选择一张卡片，开始你的探索之旅';
                            }, 1500);
                        }
                    }
                });
            });
            
            // 重置游戏
            resetButton.addEventListener('click', function() {
                cards.forEach(card => {
                    card.classList.remove('flipped');
                });
                flippedCards = [];
                activePair = null;
                gameMessage.textContent = '选择一张卡片，开始你的探索之旅';
                
                // 添加重置动画
                this.classList.add('animate-spin');
                setTimeout(() => {
                    this.classList.remove('animate-spin');
                }, 500);
            });
        });
    </script>
</body>
</html>
